<template>
	<view class="box">
		<view class="top-tabs">
			<u-tabs :list="listTabs" @change="hdTabs" lineHeight="10rpx" lineWidth="55rpx" lineColor="#fb8b07"></u-tabs>
		</view>

		<view class="li-box">
			<view class="li" v-for="item in list" :key="item.id" @click="$navTo('pages/mines/feedbackDetails?id='+item.id)">
				<view class="title oneline-hide">
					<u-icon name="email-fill" color="#e4942d"></u-icon>
					<view class="oneline-hide">
						{{item.title}}
					</view>
				</view>
				<view class="vtitle">
					{{item.create_time}}
				</view>
				<view class="content threeline-hide">
					{{item.message}}
				</view>

				<view class="recover " v-if="item !==3">
					<view class="left">
						平台回复
					</view>
					<view class="oneline-hide right">
						{{item.admin_message || '客服正在处理中'}}
					</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="$navTo('pages/mines/feedbackInfo')">
			立即反馈
		</view>
	</view>
</template>

<script>
	import {
		UserApi
	} from '@/api';
	export default {
		data() {
			return {
				listTabs: [{
					name: '全部',
					id: -1
				}, {
					name: '待处理',
					id: 0
				}, {
					name: '已回复',
					id: 1
				}],
				p: 1,
				status: -1,
				list: []
			};
		},
		onLoad() {
			this.FeedbacksList()
		},
		methods: {
			async FeedbacksList(bol = true) {
				try {
					if (bol) this.p = 1
					const res = await UserApi.FeedbacksList({
						status: this.status,
						p: this.p,
						size: 10,
					})
					if (bol)
						return this.list = res.result.rows
					this.list.push(...res.result.rows)
				} catch (e) {
					//TODO handle the exception
				}
			},
			hdTabs(e) {
				this.status = e.id
				this.FeedbacksList()
			}
		},
		onReachBottom() {
			this.p += 1
			this.FeedbacksList(false)
		}


	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		box-sizing: border-box;
		padding-bottom: $safe-btm-env;

		.btn {
			position: fixed;
			bottom: $safe-btm-env;
			left: 30rpx;
			width: 690rpx;
			height: 88rpx;
			border-radius: 50rpx;
			opacity: 1;
			background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.li-box {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0;
			height: 1100rpx;
			overflow-y: auto;

			.li {
				width: 690rpx;
				height: 300rpx;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 30rpx;
				background-color: #ffffff;

				.title {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #111;

					view {
						margin-left: 5rpx;
					}
				}

				.vtitle {
					color: #999999;
					font-size: 22rpx;
					font-weight: 400;
					margin: 20rpx 0;
				}

				.content {
					color: #777777;
					text-align: left;
					font-size: 23rpx;
					font-weight: 400;
					margin-bottom: 50rpx;
				}

				.recover {
					display: flex;
					align-items: center;
					width: 100%;
					height: calc(100% - 90rpx - 150rpx - 40rpx);
					box-sizing: border-box;
					padding: 20rpx;
					background: linear-gradient(to right, #fef1de, #fbf3ea, #fff);

					.left {
						color: #111111;
						text-align: center;
						font-size: 22rpx;
						padding-right: 20rpx;
						border-right: 1rpx solid #999999;

					}

					.right {
						color: #777777;
						font-size: 22rpx;
						font-weight: 400;
						padding-left: 20rpx;
					}
				}
			}
		}

		.top-tabs {
			width: 100%;
			padding: 32rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			height: 120rpx;
			background-color: #fef2e6;
		}
	}
</style>